import React, { useRef, useEffect, useState } from 'react';
import dragula from 'dragula';
import 'dragula/dist/dragula.css'; // 引入默认样式
import './index.css'; // 自定义样式

const DragulaDemo = () => {
  // 状态管理：两个列表的数据
  const [listA, setListA] = useState([
    { id: 1, text: 'Item A1' },
    { id: 2, text: 'Item A2' },
    { id: 3, text: 'Item A3' },
  ]);
  const [listB, setListB] = useState([
    { id: 4, text: 'Item B1' },
    { id: 5, text: 'Item B2' },
  ]);

  // 列表容器的 DOM 引用
  const listARef = useRef(null);
  const listBRef = useRef(null);

  // 初始化 dragula
  useEffect(() => {
    // 配置可拖拽的容器（多个列表）
    const drake = dragula([listARef.current, listBRef.current], {
      // 可选配置（默认已支持核心功能）
      direction: 'vertical', // 垂直方向拖拽
      copy: false, // 关闭复制模式（默认移动）
      revertOnSpill: false, // 拖拽到容器外不返回原位置
      removeOnSpill: false, // 拖拽到容器外不删除元素
    });

    // 监听拖拽结束事件，更新数据状态
    // drake.on('drop', (el, target, source, sibling) => {
    //   // el：被拖拽的元素
    //   // target：目标容器（拖拽后放入的容器）
    //   // source：源容器（拖拽前所在的容器）
    //   // sibling：目标容器中，el 插入到其前面的元素

    //   // 获取元素的 ID（从 DOM 中读取自定义属性）
    //   const itemId = parseInt(el.dataset.id, 10);

    //   // 1. 从源列表中移除元素
    //   let newSourceList = [];
    //   if (source === listARef.current) {
    //     newSourceList = listA.filter(item => item.id !== itemId);

    //     console.log(newSourceList);
        
    //     setListA(newSourceList);
    //   } else if (source === listBRef.current) {
    //     newSourceList = listB.filter(item => item.id !== itemId);
    //     setListB(newSourceList);
    //   }

    //   // 2. 插入到目标列表中
    //   if (target === listARef.current) {
    //     // 找到插入位置（sibling 为 null 时插入到末尾）
    //     const siblingId = sibling ? parseInt(sibling.dataset.id, 10) : null;
    //     const insertIndex = siblingId 
    //       ? listA.findIndex(item => item.id === siblingId)
    //       : listA.length;
    //     // 从源列表中找到被拖拽的元素（已过滤，需从原始数据中取）
    //     const itemToMove = listA.find(item => item.id === itemId) || listB.find(item => item.id === itemId);
    //     // 插入到目标列表
    //     const newTargetList = [
    //       ...listA.slice(0, insertIndex),
    //       itemToMove,
    //       ...listA.slice(insertIndex),
    //     ];
    //     setListA(newTargetList);
    //   } else if (target === listBRef.current) {
    //     const siblingId = sibling ? parseInt(sibling.dataset.id, 10) : null;
    //     const insertIndex = siblingId 
    //       ? listB.findIndex(item => item.id === siblingId)
    //       : listB.length;
    //     const itemToMove = listA.find(item => item.id === itemId) || listB.find(item => item.id === itemId);
    //     const newTargetList = [
    //       ...listB.slice(0, insertIndex),
    //       itemToMove,
    //       ...listB.slice(insertIndex),
    //     ];
    //     setListB(newTargetList);
    //   }
    // });

    // 组件卸载时销毁 dragula 实例
    return () => drake.destroy();
  }, [listA, listB]); // 依赖列表数据，数据变化时重新初始化

  return (
    <div className="dragula-demo">
      <h2>Dragula 效果演示（支持跨列表拖拽）</h2>
      <div className="lists-container">
        {/* 列表 A */}
        <div className="list" ref={listARef}>
          <h3>列表 A</h3>
          {listA.map(item => (
            <div 
              key={item.id} 
              data-id={item.id} // 存储 ID 用于拖拽后定位
              className="drag-item"
            >
              {item.text}
            </div>
          ))}
        </div>

        {/* 列表 B */}
        <div className="list" ref={listBRef}>
          <h3>列表 B</h3>
          {listB.map(item => (
            <div 
              key={item.id} 
              data-id={item.id}
              className="drag-item"
            >
              {item.text}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default DragulaDemo;